<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/personal.css">
    <link rel="stylesheet" href="/css/userweb/myCollection.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
{include file="html/Common/indexHeader"}
<div class="index_container">
    <!--轮播-->
    <div class="banner">
        <ul id="on"></ul>
        <div class="banner_list"></div>
    </div>
    <div class="content">
        <div class="my_show_container">
            <div class="my_show_box">
                <!--个人信息列表-->
                <div class="categories_list ">
                    <ul>
                        <li>
                            <a href="/userweb/index/myInfo">
                                <div class="list_title">
                                    <div class="title_zh">个人信息</div>
                                    <div class="title_en">personal information</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/myOrder">
                                <div class="list_title">
                                    <div class="title_zh">我的订单</div>
                                    <div class="title_en">my order</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/myCollection" class="active">
                                <div class="list_title">
                                    <div class="title_zh">我的收藏</div>
                                    <div class="title_en">my collection</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow-change.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/evaluation">
                                <div class="list_title">
                                    <div class="title_zh">收到评价</div>
                                    <div class="title_en">received evaluation</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/notification">
                                <div class="list_title">
                                    <div class="title_zh">系统通知</div>
                                    <div class="title_en">system notification</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="/userweb/index/set">
                                <div class="list_title">
                                    <div class="title_zh">设置</div>
                                    <div class="title_en">settings</div>
                                </div>
                                <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--收藏列表-->
                <div class="my_show_content" id="myCollection" v-cloak>
                    <div class="my_show_bar">
                        <!--导航-->
                        <div class="collection_nav">
                            <ul>
                                <li class="nav-tabs active">
                                    <a href="#collectionProduct" data-toggle="tab" v-on:click = "collectProduct()">
                                        <div class="title_zh">收藏商品</div>
                                        <div class="title_en">favorite products</div>
                                    </a>
                                </li>
                                <li class="nav-tabs">
                                    <a href="#collectionShop" data-toggle="tab" v-on:click="collectSupplier()">
                                        <div class="title_zh">收藏商家</div>
                                        <div class="title_en">favorite store</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!--分类-->
                        <div class="select_search" v-show="classification">
                            <div class="select_search_cont" v-on:click="showSelect()">
                                <div class="select_search_img">
                                    <img src="/image/userweb/slicesImg/search-select.png" alt="">
                                </div>
                                <div class="select_show">全部分类／all Categories</div>
                                <div class="select_search_tit" id="baseData">
                                    <a v-on:click="clickSelect(3)">
                                        <div class="title_zh">全部分类</div>
                                        <div class="title_en">all Categories</div>
                                    </a>
                                    <a v-for="list in classify" v-on:click="clickSelect(1,list)">
                                        <div class="title_zh">{{list.name}}</div>
                                        <div class="title_en">{{list.name_english}}</div>
                                    </a>
                                </div>
                            </div>
                            <div class="shop_search_btn" v-on:click="clickSelect(2)">
                                <a>搜索/search</a>
                            </div>
                        </div>
                    </div>
                    <div class="content_container tab-content">
                        <!--商品-->
                        <div class="collection_product_content tab-pane active" id="collectionProduct">
                            <div class="content_bar">
                                <ul class="my_nav">
                                    <li class="active" >
                                        <a href="#allProduct" v-on:click="collectProduct(0)" data-toggle="tab"  onclick="showAllBar()">
                                            <div class="title_zh">全部商品</div>
                                            <div class="title_en">all Products</div>
                                        </a>
                                        <div class="border-b"></div>
                                    </li>
                                    <div></div>
                                    <li>
                                        <a href="#expiredProduct" v-on:click="collectProduct(-1)" data-toggle="tab" onclick="showInvalidBar()">
                                            <div class="title_zh">失效商品</div>
                                            <div class="title_en">not avaliable</div>
                                        </a>
                                        <div class="border-b"></div>
                                    </li>
                                    <em class="clear-float"></em>
                                </ul>
                                <div class="manage_btn_box" id="allBar">
                                    <div class="batch_box" id="batchManage">
                                        <div class="batch_manage_btn">
                                            <a  onclick="batchManage()">
                                                <div class="title_zh">批量管理</div>
                                                <div class="title_en">batch management</div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="batch_box" id="cancelManage" >
                                        <div class="radio_bar" >
                                            <input type="checkbox" class="allCheckbox">
                                            <label><span></span></label>
                                            <div class="radio_title" >
                                                <div class="title_zh">全选</div>
                                                <div class="title_en">all</div>
                                            </div>
                                        </div>
                                        <div class="batch_manage_btn" v-on:click = "delProduct(2)">
                                            <a href="javascript:;">
                                                <div class="title_zh">删除</div>
                                                <div class="title_en">Delete</div>
                                            </a>
                                        </div>
                                        <div class="batch_manage_btn">
                                            <a onclick="cancelManage()">
                                                <div class="title_zh">取消管理</div>
                                                <div class="title_en">cancel management</div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="manage_btn_box" id="invalidBar" >
                                    <div class="radio_bar" v-on:click="collectProduct(-1)">
                                        <input type="radio" name="invalid-time" checked="checked">
                                        <label><span></span></label>
                                        <div class="radio_title">
                                            <div class="title_zh">已失效</div>
                                            <div class="title_en">not valid</div>
                                        </div>
                                    </div>
                                    <div class="radio_bar" v-on:click="collectProduct(1)">
                                        <input type="radio" name="invalid-time">
                                        <label><span></span></label>
                                        <div class="radio_title">
                                            <div class="title_zh">六个月前</div>
                                            <div class="title_en">six months ago</div>
                                        </div>
                                    </div>
                                    <div class="radio_bar" v-on:click="collectProduct(2)" >
                                        <input type="radio" name="invalid-time">
                                        <label><span></span></label>
                                        <div class="radio_title">
                                            <div class="title_zh">一年前</div>
                                            <div class="title_en">a year ago</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product_show_box" style="overflow: hidden" v-loading="loading">
                                <div class="tab-content" >
                                    <!--全部商品-->
                                    <div class="all_product_list tab-pane active"  id="allProduct">
                                        <div class="good_area" v-for="list in product">
                                            <div class="management_cont" >
                                                <div class="checkbox_bar">
                                                    <input type="checkbox"  :value="list.collect_id" name="ids">
                                                    <label><span></span></label>
                                                </div>
                                            </div>
                                            <div class="good_area_box">
                                                <a v-on:click="jumpProduct(list)">
                                                    <div class="good_img">
                                                        <img :src="list.image" alt="">
                                                    </div>
                                                </a>
                                                <div class="good_info" v-on:click="jumpProduct(list)">
                                                    <div class="good_name">
                                                        <a>
                                                            <div class="title_zh">{{list.product_name}}</div>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="good_price_box">
                                                    <div class="good_price">
                                                        <em>￡</em>
                                                        <span>{{list.price}}/{{list.packing_proportion}}{{list.unit}}</span>
                                                    </div>
                                                    <div class="good_delete" v-on:click = "delProduct(1,list.collect_id)">
                                                        <img src="/image/userweb/slicesImg/delete-img.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="allNoData"></div>
                                    </div>
                                    <!--失效商品-->
                                    <div class="invalid_product_list tab-pane"  id="expiredProduct">
                                        <div class="good_area" v-for="list in loseProduct">
                                            <div class="good_area_box">
                                                <div class="good_img">
                                                    <img :src="list.image" alt="">
                                                </div>
                                                <div class="good_info">
                                                    <div class="good_name">
                                                        <div class="title_zh">{{list.product_name}}</div>
                                                    </div>
                                                </div>
                                                <div class="good_price_box">
                                                    <div class="good_expired">
                                                        <span>已失效／not valid</span>
                                                    </div>
                                                    <div class="good_delete" v-on:click = "delProduct(1,list.collect_id)">
                                                        <img src="/image/userweb/slicesImg/delete-img.png" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="expiredNoData"></div>
                                        <div class="delete_btn_box" >
                                            <div class="expired_delete_btn" v-on:click = "delLoseProduct()">
                                                <a >
                                                    <div class="title_zh">全部删除</div>
                                                    <div class="title_en">delete all</div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pagination_box" v-html="paginate"></div>
                            </div>
                        </div>
                        <!--商铺-->
                        <div class="collection_shop_content tab-pane" id="collectionShop" v-loading="loading">
                            <div class="all_product_list">
                                <div class="good_area" v-for="list in store">
                                    <div class="good_area_box" >
                                        <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id">
                                            <div class="good_img">
                                                <img :src="list.image"  alt="">
                                            </div>
                                        </a>
                                        <div class="good_info">
                                            <div class="good_name">
                                                <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id">
                                                    <div class="title_zh">{{list.supplier_name}}</div>
                                                </a>
                                            </div>
                                            <div class="score_bar">
                                                <div class="score_title">评分/score</div>
                                                <div class="score_img" v-html="list.star"></div>
                                                <div class="good_delete"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="shopNoData"></div>
                            <div class="pagination_box" v-html="html"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}

</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/userweb/my/myCollection.js"></script>
<script src="/js/userweb/laydate/laydate.js"></script>
<script>
    $(function () {
        validToken(); //验证tonken.
        bannerInit(); //轮播
        $("#my").addClass("active");
        $("#my").siblings().removeClass("active");
    });
    function showAllBar() {
        $('#allBar').show();
        $('#invalidBar').hide();
        cancelManage();
    }
    function showInvalidBar() {
        $('#invalidBar').show();
        $('#allBar').hide();
        $('#allProduct').find('input[type="checkbox"]').prop("checked", false);
        $('.allCheckbox').prop("checked", false);
    }
    function batchManage() {
        $('.management_cont').show();
        $('#cancelManage').show();
        $('#batchManage').hide();
    }
    function cancelManage() {
        $('.management_cont').hide();
        $('#batchManage').show();
        $('#cancelManage').hide();
    }
    $('.allCheckbox').click(function () {
        if ($(this).is(':checked')) {
            $(this).prop("checked", true);
            $('#allProduct').find('input[type="checkbox"]').prop("checked", true);
        } else {
            $(this).prop("checked", false);
            $('#allProduct').find('input[type="checkbox"]').prop("checked", false);
        }
    });
</script>
</html>